import { docLibraryAdd } from "@/services/knowledgeFile";
import {Form, Input, Modal, Radio, message, Select} from "antd";
import React from "react";
import { selectDcTagList } from "@/services/knowledgeFile";
import { formatMessage } from 'umi-plugin-react/locale';

class AddLibrary extends React.Component{
  constructor(props){
    super(props)
    this.state = {
      visible:false,
      tagList:[]
    }
  }

  componentDidMount(){
    if(this.props.onRef){
      this.props.onRef(this)
    }
  }

  initOpen = () => {
    this.getTagList()
    this.setState({
      visible:true
    })
  }
  getTagList(){
    selectDcTagList().then(data=>{
      this.setState({tagList:data})
    })
  }
  onCancel = () => {
    this.setState({
      visible:false
    })
  }

  onOk = () => {
    this.props.form.validateFields((error,values) => {
      if(!error){
        this.doOk(values)
      }
    })
  }

  doOk = async values => {
    const res = await docLibraryAdd({...values,type:0})
    if(res.code != -1){
      message.info(res.message)
      this.onCancel()
      this.props.refreshList()
      this.props.form.resetFields()
    }
  }

  render(){
    const { visible ,tagList} = this.state;
    const { form:{getFieldDecorator} } = this.props;
    const formItemLayout = {
      labelCol: { span: 5 },
      wrapperCol: { span: 18 },
    };
    const radioStyle = {
      display: 'block',
      height: '30px',
      lineHeight: '30px',
    };
    return (
      <Modal
        title={formatMessage({ id: 'knowledgeFile.addLibrary.title' })}
        visible={visible}
        onCancel={this.onCancel}
        onOk={this.onOk}
        okText={formatMessage({ id: 'knowledgeFile.addLibrary.okText' })}
        cancelText={formatMessage({ id: 'knowledgeFile.addLibrary.cancelText' })}
      >
        <Form {...formItemLayout}>
          <Form.Item label={formatMessage({ id: 'knowledgeFile.addLibrary.name' })}>
            {getFieldDecorator("name",{rules:[{required:true,message:"请输入"}]})(
              <Input />
            )}
          </Form.Item>
          <Form.Item label={formatMessage({ id: 'knowledgeFile.addLibrary.tags' })}>
            {getFieldDecorator("tags")(
                <Select mode='multiple'>
                  {
                    tagList.map(item=>{
                      return <Select.Option value={item.id}>{item.tagName}</Select.Option>
                    })
                  }
                </Select>
            )}
          </Form.Item>
          <Form.Item label={formatMessage({ id: 'knowledgeFile.addLibrary.introduction' })}>
            {getFieldDecorator("docLibraryIntroduction")(
              <Input.TextArea autoSize={{ minRows: 2, maxRows: 6 }} />
            )}
          </Form.Item>
          <Form.Item label={formatMessage({ id: 'knowledgeFile.addLibrary.visibility' })}>
            <div style={{border:'1px solid #cccccc',borderRadius:"6px",padding:10}}>
              <div style={{marginBottom:10}}>{formatMessage({ id: 'knowledgeFile.addLibrary.visibilityDesc' })}</div>
              <Form.Item>
                {getFieldDecorator("permissionType",{initialValue:0,rules:[{required:true,message:"请选择"}]})(
                  <Radio.Group>
                    <Radio value={0} style={radioStyle}>{formatMessage({ id: 'knowledgeFile.addLibrary.private' })}</Radio>
                    <Radio value={1} style={radioStyle}>{formatMessage({ id: 'knowledgeFile.addLibrary.public' })}</Radio>
                  </Radio.Group>
                )}
              </Form.Item>
            </div>
          </Form.Item>
        </Form>
      </Modal>
    )
  }
}

export default Form.create()(AddLibrary)